$margin: 30px;

.root {
    position: relative;
}
.item {
    position: fixed;
    z-index: $z-index-toast;
    width: 300px;
    padding: 5px 10px;
    transition: opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;
    overflow: hidden;
    top: 90px;
    left: $margin;
    border-radius: 3px;
    box-sizing: border-box;
    border: 1px solid;
    background-color: #fff;
    color: rgba(0,0,0,0.6);
    visibility: visible;
    /* animation: shake 1s cubic-bezier(.36,.07,.19,.97) both; */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.item[position='top-center'], .item[position='bottom-center'] {
    left: 50%;
    margin-left: -150px;
}

.item[position='bottom-center'], .item[position='bottom-left'], .item[position='bottom-right'] {
    top: auto;
    bottom: $margin;
}

.item[position='top-right'], .item[position='bottom-right'] {
    left: auto;
    right: $margin;
}

.item[position='top-left'], .item[position='bottom-left'] {
    left: $margin;
    right: auto;
}

.item[position='top-left'], .item[position='top-center'], .item[position='top-right'] {
    top: 90px;
    bottom: auto;
}

.item[position="static"] {
    position: static;
    width: auto;
}

.item[type='info'] {
    border-color: #629BFF;
    background-color: #EAF2FF;
}
.item[type='success'] {
    border-color: #62CF98;
    background-color: #E9F8F1;
}
.item[type='error'] {
    border-color: #F14956;
    background-color: #FCECED;
}
.item[type='warning'] {
    border-color: #FDBE40;
    background-color: #FFF8E8;
}

.close {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
}

.close::before {
    font-size: 12px;
    vertical-align: middle;
}
.info {
    margin-right: 10px;
}
.info::before {
    color: #629BFF;
    font-size: 28px;
    vertical-align: middle;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}


